<template>
  <div>
    <el-form-item label="地址选取"  >
        <el-select style="width: 110px" v-model="caddress.province"  @change="choseProvince($event,true)" placeholder="请选择省" >
            <el-option v-for="item in provinceDataList" :key="item.id" :label="item.value" :value="item.id" ></el-option>
        </el-select>
        <el-select  style="width: 110px" v-model="caddress.city" @change="choseCity($event,true)" placeholder="请选择市" >
            <el-option v-for="item in cityDataListArray" :key="item.id" :label="item.value" :value="item.id" ></el-option>
        </el-select>
        <el-select v-model="caddress.area" placeholder="请选择区"  style="width: 110px" v-if="caddress.areaIsShow">
             <el-option v-for="item in areaDataListArray" :key="item.id" :label="item.value" :value="item.id" ></el-option>
        </el-select>
    </el-form-item>
  </div>
</template>

<script>
    import provinceCity from "@/assets/map/provinceCity.json";

    export default {
        name: 'li_area_select',
        model: {
            prop: 'caddress',
            event: 'change',
        },
        props: {
            caddress: {
                type: Object,
            },
        },
        data() {
            return {
                provinceDataList: [], //【数据源】---省份数据
                cityDataList: [], //【数据源】---市数据
                areaDataList: [], //【数据源】---区数据
                cityDataListArray: [], //【数据源】---市数据
                areaDataListArray: [], //【数据源】---区数据
            }
        },
        methods: {
            //初始化省市区数据
            initAreaData: function () {
                this.province = [];
                this.city = [];
                this.block = [];
                // 省市区数据分类
                for (var item in provinceCity) {
                    if (item.match(/0000$/)) {
                        //省
                        this.provinceDataList.push({
                            id: item,
                            value: provinceCity[item],
                            children: []
                        });
                    } else if (item.match(/00$/)) {
                        //市
                        this.cityDataList.push({
                            id: item,
                            value: provinceCity[item],
                            children: []
                        });
                    } else {
                        //区
                        this.areaDataList.push({id: item, value: provinceCity[item]});
                    }
                }
                // 分类市级
                for (let i in this.provinceDataList) {
                    for (let j in this.cityDataList) {
                        let provinceObj_ = this.provinceDataList[i];
                        let cityObj_ = this.cityDataList[j];
                        if (provinceObj_.id.slice(0, 2) === cityObj_.id.slice(0, 2)) {
                            provinceObj_.children.push(cityObj_);
                        }
                    }
                }
                // 分类区级
                for (let m in this.cityDataList) {
                    for (let n in this.areaDataList) {
                        let cityObj = this.cityDataList[m];
                        let areaObj = this.areaDataList[n];
                        if (cityObj.id.slice(0, 4) === areaObj.id.slice(0, 4)) {
                            cityObj.children.push(areaObj);
                        }
                    }
                }
            },

            //选择省份操作
            choseProvince(e, flag) {
                if (flag) {
                    this.caddress.city = "";
                    this.caddress.area = "";
                }
                for (var index in this.provinceDataList) {
                    if (e === this.provinceDataList[index].id) {
                        //城市、区域数据源赋值
                        this.cityDataListArray = this.provinceDataList[index].children;
                    }
                }
            },
            //选择城市操作
            choseCity(e, flag) {
                if (flag) {
                    this.caddress.area = "";
                }
                for (var index in this.cityDataList) {
                    if (e === this.cityDataList[index].id) {
                        this.areaDataListArray = this.cityDataList[index].children;
                    }
                }
            },

        },
        created() {
            this.initAreaData();
        }

    }
</script>


<style scoped>

</style>
